<template>
  <div class="body ">
<!--    版心-->
    <div class="w">
      <div class="subnav">
        <ul>
          <li><a href="#">前端开发<span>&gt;</span></a></li>
          <li><a href="#">后端开发<span>&gt;</span></a></li>
          <li><a href="#">移动开发<span>&gt;</span></a></li>
          <li><a href="#">人工智能<span>&gt;</span></a></li>
          <li><a href="#">商业预测<span>&gt;</span></a></li>
          <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
          <li><a href="#">运维&测试<span>&gt;</span></a></li>
          <li><a href="#">UI设计<span>&gt;</span></a></li>
          <li><a href="#">产品<span>&gt;</span></a></li>
        </ul>
      </div>
      <!--    课程表模块-->
      <div class="course">
        <h2>我的课程表</h2>
        <div class="bd">
          <ul>
            <li>
              <h4>继续学习 程序语言设计</h4>
              <p>正在学习-使用对象</p>
            </li>
            <li>
              <h4>继续学习 程序语言设计</h4>
              <p>正在学习-使用对象</p>
            </li>
            <li>
              <h4>继续学习 程序语言设计</h4>
              <p>正在学习-使用对象</p>
            </li>
          </ul>
          <a href="#" class="more">全部课程</a>

        </div>
      </div>


    </div>


  </div>


</template>
<script setup>

</script>
<style lang="scss" scoped>
.body{
  height: 421px;
  background-color: #1c036c;


  h1{
    color: red;
  }
  .w{
    height: 421px;
    background: url("@/images/banner2.png") no-repeat top center;
    .subnav{
      float: left;
      width: 190px;
      height: 421px;
      background: rgba(0,0,0,.3);
      ul{
        li{
          height: 45px;
          line-height: 45px;
          padding: 0 20px;
          a{
            font-size: 14px;
            color: #fff;
            span{
              float: right;
            }

          }
          a:hover{
            color: #00a4ff;
          }
        }
      }
    }
    .course{

      float: right;
      width: 230px;
      height: 300px;
      background-color: #fff;
      //浮动的盒子不会有外边距合并的问题
      margin-top: 50px;
      h2{
        height: 48px;
        background-color: #9bceea;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        color: #fff;
      }
      .bd{
        padding: 0 20px;
        ul{
          li{
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            p{
              font-size: 12px;
            }
            h4{
              font-size: 16px;
              color: #4e4e4e;
              font-weight: 700;
            }
          }
        }
        //前面的a不用了
          .more{
            display: block;
            height: 38px;
            border: 1px solid #00a4ff;
            margin-top: 5px;
            text-align: center;
            line-height: 38px;
            color: #00a4ff;
            font-size: 16px;
            font-weight: 700;
          }


      }
    }
  }
}

</style>